<template>
	<view class="cardHolderWp">
		<view class="searchBox">
			<view class="inputWp">
				<u-input placeholder="请输入内容" border="none" v-model="searchVal" @confirm="searchChange" inputAlign='left'
					prefixIcon='search' @change="searchChange" placeholderStyle="backgroudColor:'#f7f8fa'"
					prefixIconStyle="font-size: 20px;color:#86909C">
				</u-input>
			</view>
			<view class="more" @click="addFriend" hover-class="hoverClass">
				<img src="https://file.casugn.com/storecompcard/temp/加好友@2x_1657072525743.png" alt="">
			</view>
		</view>
		<view class="addFriendWp" @click="goToFriendList">
			<view class="imgWp">
				<img src="https://file.casugn.com/storecompcard/temp/general／user-add@2x_1681435877753.png" alt="">
			</view>
			<view class="textWp">
				好友申请
			</view>
			<view class="newFriendNum" v-if="newFriendNum>0">
				{{newFriendNum?newFriendNum:0}}条
			</view>
			<view hover-class="hoverClass">
				<u--image src="https://file.casugn.com/storecompcard/temp/Arrow@2x_1681436212921.png" width="32rpx"
					height="32rpx" mode=""></u--image>
			</view>
		</view>
		<u-line></u-line>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabsList" @click="tapQueryBtn" lineWidth="30rpx" lineHeight="4" lineColor="#276AEE"
				:activeStyle="{color:'#276AEE'}"></u-tabs>
		</u-sticky>
		<view v-if="actionIndex==0">
			<u-transition :show="true" mode="fade-left">
				<view v-if="friendList&& friendList.length>0">
					<cardHolderIndexList :indexList="friendList" @handleOptionbtn="handleOptionbtn"
						@goToDetail="goToDetail">
					</cardHolderIndexList>
				</view>
				<nodata v-else></nodata>
			</u-transition>
		</view>
		<view class="addressListWp" v-if="actionIndex==1">
			<u-transition :show="true" mode="fade-left">
				<cardHolderMoreList v-if="queryList.length>0" :list="queryList" @goToDetail='goToDetail'>
				</cardHolderMoreList>
				<nodata v-else></nodata>
			</u-transition>
		</view>
		<view class="addressListWp" v-if="actionIndex==2">
			<u-transition :show="true" mode="fade-left">
				<cardHolderMoreList v-if="queryList.length>0" :list="queryList" @goToDetail='goToDetail'>
				</cardHolderMoreList>
				<nodata v-else></nodata>
			</u-transition>
		</view>
		<u-action-sheet :closeOnClickAction="true" :safeAreaInsetBottom="true" cancelText="取消" :actions="optionList"
			@select="selectClick" @close="close" :show="showMoreListPopup" round="20">
		</u-action-sheet>

	</view>
</template>

<script>
	import nodata from '@/pagesCard/components/nodata/nodata'
	import {
		mapGetters
	} from 'vuex'
	import cardHolderIndexList from '@/pagesCard/components/cardHolderIndexList/cardHolderIndexList.vue'
	import cardHolderMoreList from '@/pagesCard/components/cardHolderMoreList/cardHolderMoreList.vue'
	export default {
		components: {
			cardHolderIndexList,
			cardHolderMoreList,
			nodata
		},
		data() {
			return {
				openId: '',
				searchVal: '',
				tabsList: [{
						name: '默认'
					},
					{
						name: '收藏'
					},
					{
						name: '最近添加'
					},
				],
				actionIndex: 0,
				moreList: [],
				showMoreListPopup: false,
				queryList: [],
				isChange: false,
				newFriendList: [],
				friendList: [], //好友列表
				indexList: [], //序列列表index 
				optionList: [{
						name: '收藏名片'
					},
					{
						name: '删除好友'
					}
				],
				itemInfo: {}

			};
		},
		onLoad() {
		
			// this.queryDefaultCard()
		},
		onShow() {
			let data = uni.getStorageSync('openId')
			if (data.openid) {
				this.openId = data.openid
			}
			this.showMoreListPopup = false
			this.queryDefaultCard()
			this.queryNewFriendList()
		},
		computed: {
			...mapGetters(['userInfo']),
			newFriendNum() {
				let arr = this.newFriendList.filter(item => {
					return item.status == 0
				})
				if (arr) {
					return arr.length
				}
				return ''
			}
		},
		methods: {
			// 查询新增好友
			async queryNewFriendList() {
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				let payload = {
					openId: this.openId,
					pageNo: 1,
					pageSize: 90
				}
				let res = await this.$api.queryNewFriendList(payload)
				if (res.success) {
					this.newFriendList = res.result.records.filter(item => {
						return item.status == 0
					})
					console.log(this.newFriendList, '查询新增好友');
				} else {
					this.newFriendList = []
				}
			},
			async queryDefaultCard() {
				let res = await this.$api.searchDefaultCard({
					openId: this.openId,
					name:this.searchVal
				})
				if (res.success) {
					console.log(res.result, 'queryDefaultCard');
					this.friendList = res.result
					this.indexList = this.friendList.map(item => item.initial)
				} else {
					uni.showToast({
						title: '查询失败',
						icon: 'none'
					});
					this.friendList = []
				}

			},
			checkUserInfo() {
				if (this.userInfo.id) {
					return true
				} else {
					uni.showToast({
						title: '请先创建您的名片',
						icon: 'none'
					});
					return false
				}
			},
			tapQueryBtn({
				index
			}) {
				this.actionIndex = index
				switch (index) {
					case 0:
						this.queryDefaultCard()
						break;
					case 1:
						this.queryCollectCardList()
						break;
					case 2:
						this.queryRecentAddCardList()
						break;
				}

			},
			//查询收藏通讯录list
			async queryCollectCardList() {
				let res = await this.$api.queryCollectCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询收藏通讯录list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//查询最近添加的list
			async queryRecentAddCardList() {
				let res = await this.$api.queryRecentAddCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询最近添加的list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//查询最近使用list
			async queryRecentCardList() {
				let res = await this.$api.queryRecentCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询近期使用的list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//模糊搜索
			async searchChange() {
				// let res = await this.$api.queryCardByCondition({
				// 	openId: this.openId,
				// 	name: this.searchVal
				// })
				this.queryDefaultCard()
				
			},
			//添加好友
			addFriend() {
				if (this.checkUserInfo()) {
					uni.navigateTo({
						url: '/pagesCard/addBuddy/addBuddy'
					})
				}

			},
			//好友申请列表
			goToFriendList() {
				if (this.checkUserInfo()) {
					uni.navigateTo({
						url: '/pagesCard/friendList/friendList'
					})
				}

			},
			showMore(item, index) {
				this.moreList = item
				console.log('showMore', this.moreList);
				this.showMoreListPopup = true
			},
			hiddenMoreListPopup() {
				this.showMoreListPopup = false
			},
			goToDetail({
				friendId,
				friendOpenId,
				friendUnionId
			}, index) {
				// uni.navigateTo({
				// 	url: "/pagesCard/personDetail/personDetail?item=" +
				// 		encodeURIComponent(JSON.stringify(item)),
				// });
				if (friendId) {
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${friendId}&openId=${friendOpenId}&unionId=${friendUnionId}&isFriend=${1}`
					})
				}
			},
			handleOptionbtn(item) {
				this.itemInfo = item
				let {
					status
				} = this.itemInfo
				this.showMoreListPopup = true

			},
			close() {
				this.itemInfo = {}
				this.showMoreListPopup = false
			},

			//收藏操作
			async changIsFavorite() {
				//收藏-1，取消收藏-0
				let isFavorite = null
				let {
					status
				} = this.itemInfo
				debugger
				if (status != 1) {
					isFavorite = 1
				} else {
					isFavorite = 0
				}
				let res = await this.$api.updateCollect(this.itemInfo.id, isFavorite)
				if (res.success) {
					//更新好友状态
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			delFriend() {
				let {
					id
				} = this.itemInfo
				uni.showModal({
					title: '提示',
					content: '是否确认删除好友名片?',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.delBcCardBuddy(id)
							if (res.success) {
								uni.showToast({
									title: '删除成功!',
									icon: 'none'
								});
								this.queryDefaultCard()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			selectClick({
				name
			}) {
				// this.itemInfo 
				switch (name) {
					case '收藏名片':
						this.changIsFavorite()
						break;
					case '删除好友':
						this.delFriend()
						break;
				}
			},

		},
		//分享设置
		onShareAppMessage(res) {

			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `${this.itemInfo.name?this.itemInfo.name:''}拜帖`,
					path: '/pagesCard/friendMainPage/friendMainPage?cardId=' + this.itemInfo.id
				}

			} else {
				return
			}
		},
	}
</script>

<style lang="scss" scoped>
	.cardHolderWp {
		min-height: 100vh;

		.addressListWp {
			margin: 0 30rpx;
			height: 100%;
			width: 100%;
			padding-bottom: 280rpx;
		}


		.searchBox {
			margin: 0 30upx;
			height: 72rpx;
			display: flex;
			padding-top: 30upx;
			align-items: center;

			.inputWp {
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				height: 72rpx;
				line-height: 72rpx;
				background-color: #f7f8fa;
				flex: 1;
			}

			.more {
				height: 72rpx;
				background-color: #e9f0fd;
				width: 72rpx;
				margin-left: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 30upx;
					height: 30upx;
				}
			}
		}


		.addFriendWp {
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			height: 108rpx;

			.imgWp {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.textWp {
				flex: 1;
				font-size: 30upx;
				font-weight: 400;
				color: #333333;


			}

			.newFriendNum {
				background-color: #fff;
				margin-right: 30upx;
				color: #FF7D00;
				font-size: 28upx;
				font-weight: 600;
			}
		}

		// .scrollWp {
		// 	height: 50vh;
		// 	overflow: auto;
		// }
	}
</style>